<template>
  <el-dialog v-model="showDeleteDialog" width="300px" title="温馨提示" center>
    <div>
      {{textTitle}}
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button class="dialog-close" @click="handleDialogClose">{{btnCancelText}}</el-button>
        <el-button type="primary" class="dialog-sure" @click="handleDialogSure">{{btnSureText}}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  export default defineComponent({
    name: 'ConfrimDialog',
    props: {
      onSure: Function
    },
    setup(props) {
      const showDeleteDialog = ref(false)
      const textTitle = ref('')
      const btnSureText = ref('')
      const btnCancelText = ref('')
      onMounted(() => {
        //btnSureText.value = props.sureText
      })
      const openConfirm = (text: string, sureButtonText: string, cancelButtonText: string) => {
        showDeleteDialog.value = true
        textTitle.value = text || '是否确定要执行?'
        btnSureText.value = sureButtonText || '确定'
        btnCancelText.value = cancelButtonText || '取消'
      }

      const handleDialogClose = () => {
        showDeleteDialog.value = false
      }

      const handleDialogSure = () => {
        props.onSure()
        handleDialogClose()
      }
      return {
        textTitle,
        showDeleteDialog,
        openConfirm,
        handleDialogClose,
        handleDialogSure,
        btnSureText,
        btnCancelText
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
</style>
